<template>
	<view class="order-detail-page">
		<!-- 动态背景 -->
		<view class="particle-bg">
			<view class="particle p1"></view>
			<view class="particle p2"></view>
			<view class="particle p3"></view>
		</view>

		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-back" @click="goBack">
				<uni-icons type="arrowleft" size="28" color="#fff"></uni-icons>
			</view>
			<text class="nav-title">订单详情</text>
			<view class="nav-placeholder"></view>
		</view>

		<!-- 订单状态卡片 -->
		<view class="status-card" :style="{backgroundColor: getStatusBgColor(order.status)}">
			<view class="status-header">
				<text class="order-no">DD{{order.id.toString().padStart(6, '0')}}</text>
				<view class="order-status" :style="{backgroundColor: getStatusColor(order.status)}">
					<text>{{getStatusText(order.status)}}</text>
				</view>
			</view>

			<view class="status-content">
				<view class="status-icon">
					<uni-icons :type="getStatusIcon(order.status)" size="60"
						:color="getStatusColor(order.status)"></uni-icons>
				</view>
				<text class="status-text">{{getStatusDesc(order.status)}}</text>
			</view>

			<view class="status-wave" :style="{background: getWaveColor(order.status)}"></view>
		</view>

		<!-- 订单进度 -->
		<view class="progress-section">
			<view class="section-title">
				<text>配送进度</text>
				<view class="title-line"></view>
			</view>

			<view class="timeline">
				<view class="timeline-item" :class="{active: order.status >= 0}">
					<view class="timeline-dot" :style="{backgroundColor: getStatusColor(0)}"></view>
					<view class="timeline-content">
						<text class="timeline-title">订单创建</text>
						<text class="timeline-time">{{formatTime(order.createTime)}}</text>
					</view>
				</view>

				<view class="timeline-connector" :class="{active: order.status >= 1}"></view>

				<view class="timeline-item" :class="{active: order.status >= 1}">
					<view class="timeline-dot" :style="{backgroundColor: getStatusColor(1)}"></view>
					<view class="timeline-content">
						<text class="timeline-title">已接单</text>
						<text class="timeline-time"
							v-if="logistics.pickupTime">{{formatTime(logistics.pickupTime)}}</text>
						<text class="timeline-time" v-else>待接单</text>
					</view>
				</view>

				<view class="timeline-connector" :class="{active: order.status >= 2}"></view>

				<view class="timeline-item" :class="{active: order.status >= 2}">
					<view class="timeline-dot" :style="{backgroundColor: getStatusColor(2)}"></view>
					<view class="timeline-content">
						<text class="timeline-title">配送中</text>
						<text class="timeline-time"
							v-if="logistics.deliveryStartTime">{{formatTime(logistics.deliveryStartTime)}}</text>
						<text class="timeline-time" v-else>待取件</text>
					</view>
				</view>

				<view class="timeline-connector" :class="{active: order.status >= 3}"></view>

				<view class="timeline-item" :class="{active: order.status >= 3}">
					<view class="timeline-dot" :style="{backgroundColor: getStatusColor(3)}"></view>
					<view class="timeline-content">
						<text class="timeline-title">已完成</text>
						<text class="timeline-time"
							v-if="logistics.deliveredTime">{{formatTime(logistics.deliveredTime)}}</text>
						<text class="timeline-time" v-else>待完成</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="info-section">
			<view class="section-title">
				<text>订单信息</text>
				<view class="title-line"></view>
			</view>

			<view class="info-grid">
				<view class="info-item">
					<uni-icons type="location" size="28" color="#FF9800"></uni-icons>
					<view class="info-content">
						<text class="info-label">取件地址</text>
						<text class="info-value">{{order.pickupLocation}}</text>
					</view>
				</view>

				<view class="info-item">
					<uni-icons type="person" size="28" color="#4CAF50"></uni-icons>
					<view class="info-content">
						<text class="info-label">村民信息</text>
						<text class="info-value">{{order.villagerName}} {{order.villagerPhone}}</text>
					</view>
				</view>

				<view class="info-item">
					<uni-icons type="calendar" size="28" color="#2196F3"></uni-icons>
					<view class="info-content">
						<text class="info-label">下单时间</text>
						<text class="info-value">{{formatTime(order.createTime)}}</text>
					</view>
				</view>

				<view class="info-item">
					<uni-icons type="compose" size="28" color="#9C27B0"></uni-icons>
					<view class="info-content">
						<text class="info-label">取件码</text>
						<text class="info-value">{{order.pickupCode}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="section-title">
				<text>商品信息</text>
				<view class="title-line"></view>
			</view>

			<view class="goods-list">
				<view class="goods-item">
					<image class="goods-image" src="/static/default-goods.png" mode="aspectFill"></image>
					<view class="goods-info">
						<text class="goods-name">商品ID: {{order.itemId}}</text>
						<text class="goods-spec">{{order.itemRemarks || '暂无备注信息'}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单金额 -->
		<view class="price-section">
			<view class="price-row">
				<text>基础价格</text>
				<text>¥{{order.basePrice.toFixed(2)}}</text>
			</view>
			<view class="price-row">
				<text>站点优惠</text>
				<text>-¥{{order.stationDiscount.toFixed(2)}}</text>
			</view>
			<view class="price-row">
				<text>新用户优惠</text>
				<text>-¥{{order.newUserDiscount.toFixed(2)}}</text>
			</view>
			<view class="price-row">
				<text>认证优惠</text>
				<text>-¥{{order.verifyDiscount.toFixed(2)}}</text>
			</view>
			<view class="price-divider"></view>
			<view class="price-total">
				<text>实付款</text>
				<text class="total-price">¥{{order.finalPrice.toFixed(2)}}</text>
			</view>
		</view>

		<!-- 物流信息 -->
		<view class="info-section" v-if="logistics">
			<view class="section-title">
				<text>物流信息</text>
				<view class="title-line"></view>
			</view>

			<view class="info-grid">
				<view class="info-item">
					<uni-icons type="location" size="28" color="#FF9800"></uni-icons>
					<view class="info-content">
						<text class="info-label">取件地点</text>
						<text class="info-value">{{logistics.pickupLocation}}</text>
					</view>
				</view>

				<view class="info-item" v-if="logistics.pickupTime">
					<uni-icons type="time" size="28" color="#4CAF50"></uni-icons>
					<view class="info-content">
						<text class="info-label">取件时间</text>
						<text class="info-value">{{formatTime(logistics.pickupTime)}}</text>
					</view>
				</view>

				<view class="info-item" v-if="logistics.deliveryStartTime">
					<uni-icons type="car" size="28" color="#2196F3"></uni-icons>
					<view class="info-content">
						<text class="info-label">开始配送时间</text>
						<text class="info-value">{{formatTime(logistics.deliveryStartTime)}}</text>
					</view>
				</view>

				<view class="info-item" v-if="logistics.deliveredTime">
					<uni-icons type="checkmark" size="28" color="#9C27B0"></uni-icons>
					<view class="info-content">
						<text class="info-label">送达时间</text>
						<text class="info-value">{{formatTime(logistics.deliveredTime)}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 配送员信息 -->
		<view class="info-section" v-if="order.courierName">
			<view class="section-title">
				<text>配送员信息</text>
				<view class="title-line"></view>
			</view>

			<view class="info-grid">
				<view class="info-item">
					<uni-icons type="person" size="28" color="#FF9800"></uni-icons>
					<view class="info-content">
						<text class="info-label">配送员</text>
						<text class="info-value">{{order.courierName}}</text>
					</view>
				</view>

				<view class="info-item">
					<uni-icons type="phone" size="28" color="#4CAF50"></uni-icons>
					<view class="info-content">
						<text class="info-label">联系电话</text>
						<text class="info-value">{{order.courierPhone}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn" v-if="order.status === 0" @click="acceptOrder"
				:style="{backgroundColor: getStatusColor(0)}">
				接单
			</button>
			<button class="action-btn" v-if="order.status === 1" @click="pickupOrder"
				:style="{backgroundColor: getStatusColor(1)}">
				确认取件
			</button>
			<button class="action-btn" v-if="order.status === 2" @click="completeOrder"
				:style="{backgroundColor: getStatusColor(2)}">
				确认送达
			</button>
			<button class="action-btn secondary" v-if="order.status === 3" @click="contactCustomer">
				联系客户
			</button>
			<button class="action-btn secondary" @click="navigateToMap">
				导航路线
			</button>
		</view>

		<!-- 浮动操作按钮 -->
		<view class="float-btn" @click="scanQRCode">
			<uni-icons type="scan" size="28" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					id: 0,
					status: 0,
					villagerId: null,
					villagerName: '',
					villagerPhone: '',
					itemId: null,
					pickupCode: '',
					pickupLocation: '',
					itemRemarks: '',
					courierId: null,
					courierName: null,
					courierPhone: null,
					logisticsId: null,
					basePrice: 0,
					stationDiscount: 0,
					newUserDiscount: 0,
					verifyDiscount: 0,
					finalPrice: 0,
					createTime: '',
					updateTime: ''
				},
				logistics: {
					id: null,
					pickupTime: null,
					pickupLocation: '',
					deliveryStartTime: null,
					deliveryStartLocation: null,
					deliveredTime: null,
					deliveredLocation: null,
					createTime: ''
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.fetchOrderDetail(options.id);
			}
		},
		methods: {
			async fetchOrderDetail(orderId) {
				uni.showLoading({
					title: '加载中...'
				});
				try {
					// 获取订单详情
					const orderRes = await uni.request({
						url: `http://localhost:9090/order/details?orderId=${orderId}`,
						method: 'GET'
					});

					if (orderRes.data && orderRes.data.status === 1) {
						this.order = orderRes.data.data;
						// 如果存在物流ID，获取物流信息
						if (this.order.logisticsId) {
							await this.fetchLogisticsDetail(this.order.logisticsId);
						}
					} else {
						uni.showToast({
							title: orderRes.data?.message || '获取订单详情失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
					console.error('获取订单详情失败:', error);
				} finally {
					uni.hideLoading();
				}
			},
			async fetchLogisticsDetail(logisticsId) {
				try {
					const logisticsRes = await uni.request({
						url: `http://localhost:9090/logistics/id?id=${logisticsId}`,
						method: 'GET'
					});

					if (logisticsRes.data && logisticsRes.data.status === 1) {
						this.logistics = logisticsRes.data.data;
					}
				} catch (error) {
					console.error('获取物流信息失败:', error);
				}
			},
			getStatusText(status) {
				const statusMap = {
					0: '待接单',
					1: '已接单',
					2: '配送中',
					3: '已完成'
				};
				return statusMap[status] || '未知状态';
			},
			getStatusDesc(status) {
				const descMap = {
					0: '等待配送员接单',
					1: '配送员已接单，准备取件',
					2: '配送员正在配送中',
					3: '订单已完成配送'
				};
				return descMap[status] || '';
			},
			getStatusIcon(status) {
				switch (status) {
					case 0:
						return 'cart';
					case 1:
						return 'checkbox-filled';
					case 2:
						return 'car';
					case 3:
						return 'checkmarkempty';
					default:
						return 'help';
				}
			},
			getStatusColor(status) {
				switch (status) {
					case 0:
						return '#FF9800';
					case 1:
						return '#2196F3';
					case 2:
						return '#FFC107';
					case 3:
						return '#4CAF50';
					default:
						return '#666';
				}
			},
			getStatusBgColor(status) {
				const bgMap = {
					0: 'rgba(255, 152, 0, 0.1)',
					1: 'rgba(33, 150, 243, 0.1)',
					2: 'rgba(255, 193, 7, 0.1)',
					3: 'rgba(76, 175, 80, 0.1)'
				};
				return bgMap[status] || 'rgba(0, 0, 0, 0.1)';
			},
			getWaveColor(status) {
				const waveMap = {
					0: 'linear-gradient(90deg, transparent, rgba(255, 152, 0, 0.3), transparent)',
					1: 'linear-gradient(90deg, transparent, rgba(33, 150, 243, 0.3), transparent)',
					2: 'linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.3), transparent)',
					3: 'linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.3), transparent)'
				};
				return waveMap[status] || 'linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3), transparent)';
			},
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			async acceptOrder() {
				uni.showLoading({
					title: '接单中...'
				});
				try {
					// 这里应该是调用接单API
					// 模拟API调用成功
					await new Promise(resolve => setTimeout(resolve, 1000));

					this.order.status = 1;
					this.order.courierId = 1; // 假设当前配送员ID为1
					this.order.courierName = "当前用户";
					this.order.courierPhone = "13800138000";

					// 更新物流信息
					this.logistics.pickupTime = new Date().toISOString();

					uni.showToast({
						title: '接单成功',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '接单失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			async pickupOrder() {
				uni.showLoading({
					title: '确认取件中...'
				});
				try {
					// 这里应该是调用确认取件API
					// 模拟API调用成功
					await new Promise(resolve => setTimeout(resolve, 1000));

					this.order.status = 2;
					this.logistics.deliveryStartTime = new Date().toISOString();
					this.logistics.deliveryStartLocation = this.order.pickupLocation;

					uni.showToast({
						title: '取件成功',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '取件失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			async completeOrder() {
				uni.showLoading({
					title: '确认送达中...'
				});
				try {
					// 这里应该是调用确认送达API
					// 模拟API调用成功
					await new Promise(resolve => setTimeout(resolve, 1000));

					this.order.status = 3;
					this.logistics.deliveredTime = new Date().toISOString();
					this.logistics.deliveredLocation = "已送达";

					uni.showToast({
						title: '订单已完成',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			contactCustomer() {
				if (this.order.villagerPhone) {
					uni.makePhoneCall({
						phoneNumber: this.order.villagerPhone
					});
				} else {
					uni.showToast({
						title: '无客户联系电话',
						icon: 'none'
					});
				}
			},
			navigateToMap() {
				uni.openLocation({
					latitude: 39.90403, // 实际应该使用订单的经纬度
					longitude: 116.407526,
					name: this.order.pickupLocation,
					address: this.order.pickupLocation
				});
			},
			scanQRCode() {
				uni.scanCode({
					success: (res) => {
						uni.showToast({
							title: '扫码成功',
							icon: 'success'
						});
						// 处理扫码结果
					}
				});
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		padding-bottom: 180rpx;
		overflow-x: hidden;
	}

	.order-detail-page {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		padding-bottom: 180rpx;
		overflow-x: hidden;
	}

	/* 动态粒子背景 */
	.particle-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		overflow: hidden;

		.particle {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			filter: blur(1px);
			opacity: 0.6;
			animation: float 15s infinite ease-in-out;

			&.p1 {
				width: 300rpx;
				height: 300rpx;
				top: 10%;
				left: 5%;
				background: rgba(74, 144, 226, 0.2);
				animation-delay: 0s;
			}

			&.p2 {
				width: 250rpx;
				height: 250rpx;
				bottom: 15%;
				right: 5%;
				background: rgba(76, 175, 80, 0.2);
				animation-delay: 5s;
			}

			&.p3 {
				width: 200rpx;
				height: 200rpx;
				top: 50%;
				left: 20%;
				background: rgba(255, 193, 7, 0.2);
				animation-delay: 10s;
			}
		}
	}

	/* 顶部导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		padding: 60rpx 30rpx 30rpx;
		position: relative;
		z-index: 10;
		background: linear-gradient(135deg, #4a90e2, #6a8ccc);
		box-shadow: 0 10rpx 30rpx rgba(74, 144, 226, 0.3);

		.nav-back {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(10rpx);
			transition: all 0.3s;

			&:active {
				background: rgba(255, 255, 255, 0.3);
			}
		}

		.nav-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		.nav-placeholder {
			width: 60rpx;
		}
	}

	/* 状态卡片 */
	.status-card {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		animation: fadeInDown 0.5s both;

		.status-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.order-no {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.order-status {
				padding: 8rpx 20rpx;
				border-radius: 20rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		.status-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;

			.status-icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			}

			.status-text {
				font-size: 28rpx;
				color: #666;
				text-align: center;
			}
		}

		.status-wave {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10rpx;
			animation: wave 3s infinite linear;
		}
	}

	/* 区块标题 */
	.section-title {
		margin: 40rpx 30rpx 20rpx;
		position: relative;

		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			position: relative;
			display: inline-block;
			padding-right: 20rpx;
			background: linear-gradient(135deg, #4a90e2, #6a8ccc);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.title-line {
			position: absolute;
			bottom: 5rpx;
			left: 0;
			width: 100%;
			height: 2rpx;
			background: linear-gradient(90deg, rgba(74, 144, 226, 0.3), transparent);
		}
	}

	/* 进度时间轴 */
	.progress-section {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		animation: fadeInUp 0.5s both;

		.timeline {
			padding-left: 40rpx;
			position: relative;

			.timeline-item {
				position: relative;
				padding-bottom: 40rpx;

				&.active {
					.timeline-dot {
						box-shadow: 0 0 0 5rpx rgba(255, 255, 255, 0.8);
					}

					.timeline-title {
						color: #333;
						font-weight: bold;
					}

					.timeline-time {
						color: #666;
					}
				}

				.timeline-dot {
					position: absolute;
					left: -50rpx;
					top: 0;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					z-index: 2;
					box-shadow: 0 0 0 5rpx rgba(255, 255, 255, 0.8);
					transition: all 0.3s;
				}

				.timeline-content {
					padding-left: 20rpx;

					.timeline-title {
						display: block;
						font-size: 28rpx;
						color: #999;
						margin-bottom: 5rpx;
						transition: all 0.3s;
					}

					.timeline-time {
						display: block;
						font-size: 24rpx;
						color: #ccc;
						transition: all 0.3s;
					}
				}
			}

			.timeline-connector {
				position: absolute;
				left: -41rpx;
				top: 20rpx;
				width: 2rpx;
				height: calc(100% - 20rpx);
				background: #eee;
				z-index: 1;

				&.active {
					background: linear-gradient(to bottom, #4a90e2, #4CAF50);
				}
			}
		}
	}

	/* 信息区块 */
	.info-section,
	.goods-section,
	.remark-section {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		animation: fadeInUp 0.5s both;
	}

	.info-grid {
		.info-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			uni-icons {
				margin-right: 20rpx;
				margin-top: 5rpx;
			}

			.info-content {
				flex: 1;

				.info-label {
					display: block;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 5rpx;
				}

				.info-value {
					display: block;
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
				}
			}
		}
	}

	.goods-list {
		.goods-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

			&:last-child {
				border-bottom: none;
			}

			.goods-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
				background-color: #f5f5f5;
			}

			.goods-info {
				flex: 1;

				.goods-name {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
				}

				.goods-spec {
					display: block;
					font-size: 24rpx;
					color: #999;
				}
			}

			.goods-price {
				text-align: right;

				.price {
					display: block;
					font-size: 28rpx;
					color: #FF5722;
					margin-bottom: 5rpx;
				}

				.quantity {
					display: block;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.remark-content {
		background: rgba(0, 0, 0, 0.03);
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}

	/* 价格区块 */
	.price-section {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		animation: fadeInUp 0.5s both;

		.price-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #666;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.price-divider {
			height: 1rpx;
			background: rgba(0, 0, 0, 0.05);
			margin: 25rpx 0;
		}

		.price-total {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;

			.total-price {
				color: #FF5722;
			}
		}
	}

	/* 底部操作按钮 */
	.action-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 -5rpx 30rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		backdrop-filter: blur(10rpx);
		border-top: 1rpx solid rgba(255, 255, 255, 0.3);

		button {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			margin: 0 10rpx;
			transition: all 0.3s;

			&:active {
				transform: scale(0.95);
			}

			&.action-btn {
				color: #fff;
				border: none;
				box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
			}

			&.secondary {
				background: #fff;
				color: #4a90e2;
				border: 1rpx solid #4a90e2;
				box-shadow: none;
			}
		}
	}

	/* 浮动按钮 */
	.float-btn {
		position: fixed;
		right: 40rpx;
		bottom: 140rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #4a90e2, #6a8ccc);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 15rpx 40rpx rgba(74, 144, 226, 0.4);
		z-index: 100;
		transition: all 0.3s;

		&:active {
			transform: scale(0.95);
		}
	}

	/* 动画效果 */
	@keyframes float {

		0%,
		100% {
			transform: translate(0, 0) rotate(0deg);
		}

		25% {
			transform: translate(20rpx, -30rpx) rotate(5deg);
		}

		50% {
			transform: translate(-15rpx, 20rpx) rotate(-5deg);
		}

		75% {
			transform: translate(10rpx, -10rpx) rotate(3deg);
		}
	}

	@keyframes wave {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>